<template>
  <!-- 设置组件 -->
  <div id="setting">
    <!-- 头部 -->
    <div class="settingHeader">
      <!-- 关闭按钮 -->
      <i class="iconfont icon-guanbi" @click="closeSetting"></i>
    </div>
    <!-- 主内容 -->
    <div class="settingMain">
      <!-- 头像 -->
      <div class="portrait">
        <img :src="this.userData.avatar" alt="头像" @click="changePortrait" />
        <span @click="changePortrait">修改</span>
        <form
          action
          method="post"
          enctype="multipart/form-data"
          id="uploadFormMulti"
        >
          <!-- 上传图片 -->
          <input
            style="display: none"
            type="file"
            name="file"
            multiple
            accept="image/jpg, image/jpeg, image/png"
            @change="uploadPortrait"
            ref="upPortrait"
          />
        </form>
      </div>
      <!-- 昵称 -->
      <div class="item">
        <div class="itemName"><span>昵称</span></div>
        <div class="itemMain">
          <span class="itemText" v-if="!isChangeNick">{{ getNickName() }}</span>
          <span class="itemBtn" v-if="!isChangeNick" @click="changeNick"
            >修改</span
          >
          <input
            type="text"
            v-if="isChangeNick"
            ref="nickInput"
            v-model="nowNick"
            @keydown.enter="submitNick"
            class="itemInput"
          />
          <span class="itemBtn" v-if="isChangeNick" @click="submitNick"
            >确认</span
          >
        </div>
      </div>

      <!-- 性别 -->
      <div class="item">
        <div class="itemName"><span>性别</span></div>
        <div class="itemMain">
          <span class="itemText" v-if="!isChangeSex">{{ getSex() }}</span>
          <span class="itemBtn" v-if="!isChangeSex" @click="changeSex"
            >修改</span
          >
          <form
            action
            method="post"
            enctype="multipart/form-data"
            id="uploadFormMulti"
            v-if="isChangeSex"
          >
            <div
              class="radio"
              @click="setSex(0)"
              :style="nowSex === 0 && 'background-color: #0182c7;'"
            ></div>
            <span>男</span>
            <div
              class="radio"
              @click="setSex(1)"
              :style="nowSex === 1 && 'background-color: #0182c7;'"
            ></div>
            <span>女</span>
          </form>
          <span class="itemBtn" v-if="isChangeSex" @click="submitSex"
            >确认</span
          >
        </div>
      </div>

      <!-- 年龄 -->
      <div class="item">
        <div class="itemName"><span>年龄</span></div>
        <div class="itemMain">
          <span class="itemText" v-if="!isChangeAge">{{ getAge() }}</span>
          <span class="itemBtn" v-if="!isChangeAge" @click="changeAge"
            >修改</span
          >
          <input
            type="text"
            v-if="isChangeAge"
            ref="ageInput"
            v-model="nowAge"
            @keydown.enter="submitAge"
            class="itemInput"
          />
          <span class="itemBtn" v-if="isChangeAge" @click="submitAge"
            >确认</span
          >
        </div>
      </div>

      <!-- 会员等级 -->
      <div class="item">
        <div class="itemName"><span>会员等级</span></div>
        <div class="itemMain">
          <span class="itemText">{{ getVip() }}</span>
          <span class="itemBtn" @click="changeVip" v-if="userData.grade === '0'"
            >升级</span
          >
        </div>
      </div>

      <!-- 学生认证 -->
      <div class="item">
        <div class="itemName"><span>学生认证</span></div>
        <div class="itemMain">
          <span class="itemText">{{ getStudent() }}</span>
          <span class="itemBtn" @click="changeStudent" v-if="!userData.student"
            >认证</span
          >
        </div>
      </div>

      <!-- 手机号码 -->
      <div class="item">
        <div class="itemName"><span>手机号码</span></div>
        <div class="itemMain">
          <span class="itemText">{{ getPhone() }}</span>
          <span
            class="itemBtn"
            @click="changePhone"
            v-if="userData.mobile === ''"
            >绑定</span
          >
          <span
            class="itemBtn"
            @click="changePhone"
            v-if="userData.mobile !== ''"
            >改绑</span
          >
        </div>
      </div>

      <!-- 登录密码 -->
      <div class="item">
        <div class="itemName"><span>登录密码</span></div>
        <div class="itemMain">
          <span class="itemText" v-if="!isChangePassword">{{
            getPassword()
          }}</span>
          <span class="itemBtn" v-if="!isChangePassword" @click="changePassword"
            >修改</span
          >
          <input
            type="password"
            v-if="isChangePassword"
            ref="passwordInput"
            v-model="nowPassword"
            @keydown.enter="submitPassword"
            class="itemInput"
          />
          <span class="itemBtn" v-if="isChangePassword" @click="submitPassword"
            >确认</span
          >
        </div>
      </div>

      <!-- 邮箱 -->
      <div class="item">
        <div class="itemName"><span>邮箱</span></div>
        <div class="itemMain">
          <span class="itemText">{{ getEmail() }}</span>
          <span
            class="itemBtn"
            @click="changeEmail"
            v-if="userData.email === ''"
            >绑定</span
          >
          <span
            class="itemBtn"
            @click="changeEmail"
            v-if="userData.email !== ''"
            >改绑</span
          >
        </div>
      </div>

      <!-- 微信 -->
      <!-- <div class="item">
        <div class="itemName"><span>微信</span></div>
        <div class="itemMain">
          <span class="itemText">{{ getWechat() }}</span>
          <span
            class="itemBtn"
            @click="changeWechat"
            v-if="userData.wechat === ''"
            >绑定</span
          >
          <span
            class="itemBtn"
            @click="changeWechat"
            v-if="userData.wechat !== ''"
            >改绑</span
          >
        </div>
      </div> -->

      <!-- 文档密码 -->
      <div class="item">
        <div class="itemName"><span>文档密码</span></div>
        <div class="itemMain">
          <span class="itemText" v-if="!isChangeFilePassword">{{
            getFilePassword()
          }}</span>
          <span
            class="itemBtn"
            v-if="!isChangeFilePassword"
            @click="changeFilePassword"
            >修改</span
          >
          <input
            type="password"
            v-if="isChangeFilePassword"
            ref="filePasswordInput"
            v-model="nowFilePassword"
            @keydown.enter="submitFilePassword"
            class="itemInput"
          />
          <span
            class="itemBtn"
            v-if="isChangeFilePassword"
            @click="submitFilePassword"
            >确认</span
          >
        </div>
      </div>

      <!-- 注销账号 -->
      <div class="item">
        <span class="itemBtn" @click="deleteUser">注销账号</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Setting",
  data() {
    return {
      // 创建formData对象
      formData: new FormData(),
      // 上传的头像文件
      file: null,
      // 是否为修改昵称状态
      isChangeNick: false,
      // 当前输入的昵称
      nowNick: "",
      // 当前选择的性别
      nowSex: -1,
      // 是否为修改性别状态
      isChangeSex: false,
      // 是否为修改年龄状态
      isChangeAge: false,
      // 当前输入的年龄
      nowAge: 0,
      // 是否为修改登录密码状态
      isChangePassword: false,
      // 当前输入的密码
      nowPassword: "",
      // 是否为修改登录密码状态
      isChangeFilePassword: false,
      // 当前输入的密码
      nowFilePassword: "",
    };
  },
  props: ["userData"],
  mounted() {
    this.nowNick = this.userData.nickName;
    this.nowSex = this.userData.sex;
    this.nowAge = this.userData.age;
    this.nowPassword = this.userData.password;
    this.nowFilePassword = this.userData.notepassword;
  },
  methods: {
    changePortrait() {
      this.$refs.upPortrait.click();
    },
    uploadPortrait() {
      // 将获取到的文件赋值给this.files
      this.file = this.$refs.upPortrait.files[0];
      // console.log(this.file);
      // 将文件添加到formData
      this.formData.append("file", this.file);
      // 发送ajax请求
      console.log(this.$refs.upPortrait.value);
      // 清空文件输入框
      this.$refs.upPortrait.value = "";
      // 清空file
      this.file = null;
    },
    // 格式化昵称
    getNickName() {
      if(this.userData.nickname === null){
        return '未设置';
      }else{
        return this.userData.nickname;
      }
    },
    // 修改昵称
    changeNick() {
      this.isChangeNick = true;
      setTimeout(() => {
        console.log(this.$refs.nickInput);
        this.$refs.nickInput.style.border = "#0182c7 solid 1px";
        this.$refs.nickInput.focus();
      }, 100);
    },
    // 确认修改昵称
    submitNick() {
      if (this.nowNick != this.userData.nickname) {
        console.log("将修改后的昵称提交到服务器修改");
        // 告诉user组件重新获取userData数据
        this.$bus.$emit("reGetUserData", "1");
      }
      this.isChangeNick = false;
    },
    // 格式化性别
    getSex() {
      switch (this.userData.sex) {
        case null:
          return "未设置";
        case 0:
          return "男";
        case 1:
          return "女";
      }
    },
    // 修改性别
    changeSex() {
      this.isChangeSex = true;
    },
    // 选中性别
    setSex(sex) {
      this.nowSex = sex;
    },
    // 确认修改性别
    submitSex() {
      if (this.nowSex != this.userData.sex) {
        console.log("将修改后的性别提交到服务器修改");
        // 告诉user组件重新获取userData数据
        this.$bus.$emit("reGetUserData", "1");
      }
      this.isChangeSex = false;
    },
    // 格式化年龄
    getAge(){
      if(this.userData.age === null){
        return '未设置';
      }else{
        return this.userData.age;
      }
    },
    // 修改年龄
    changeAge() {
      this.isChangeAge = true;
      setTimeout(() => {
        console.log(this.$refs.ageInput);
        this.$refs.ageInput.style.border = "#0182c7 solid 1px";
        this.$refs.ageInput.focus();
      }, 100);
    },
    // 确认修改年龄
    submitAge() {
      if (this.nowAge != this.userData.age) {
        console.log("将修改后的年龄提交到服务器修改");
        // 告诉user组件重新获取userData数据
        this.$bus.$emit("reGetUserData", "1");
      }
      this.isChangeAge = false;
    },
    // 格式化会员等级
    getVip() {
      // console.log("格式化会员等级");
      // console.log(this.userData.grade);

      switch (this.userData.grade) {
        case "0":
          return "普通会员";
        case "1":
          return "超级会员";
      }
    },
    // 升级会员
    changeVip() {
      console.log("进入vip充值页");
    },
    // 格式化学生认证
    getStudent() {
      if (this.userData.student) {
        return "已认证";
      } else {
        return "未认证(认证享学生专属福利)";
      }
    },
    // 学生认证
    changeStudent() {
      console.log("进入学生认证页");
    },
    // 格式化手机号
    getPhone() {
      if (this.userData.mobile === "") {
        return "未绑定";
      } else {
        return (
          this.userData.mobile.slice(0, 3) +
          "****" +
          this.userData.mobile.slice(7, 11)
        );
      }
    },
    // 绑定手机
    changePhone() {
      console.log("弹出手机号和验证码输入框");
    },
    // 格式化密码
    getPassword() {
      if (this.userData.password === null) {
        return "未设置";
      } else {
        return "已设置";
      }
    },
    // 修改密码
    changePassword() {
      this.isChangePassword = true;
      setTimeout(() => {
        // console.log(this.$refs.nickInput);
        this.$refs.passwordInput.style.border = "#0182c7 solid 1px";
        this.$refs.passwordInput.focus();
      }, 100);
    },
    // 确认修改密码
    submitPassword() {
      if (this.nowPassword != this.userData.password) {
        console.log("将修改后的密码提交到服务器修改");
        // 告诉user组件重新获取userData数据
        this.$bus.$emit("reGetUserData", "1");
      }
      this.isChangePassword = false;
    },
    // 格式化邮箱
    getEmail() {
      if (this.userData.email === "") {
        return "未绑定";
      } else {
        return this.userData.email;
      }
    },
    // 绑定邮箱
    changeEmail() {
      console.log("弹出邮箱号和验证码输入框");
    },
    // 格式化微信
    // getWechat() {
    //   if (this.userData.wechat === "") {
    //     return "未绑定";
    //   } else {
    //     return this.userData.wechat;
    //   }
    // },
    // 绑定微信
    // changeWechat() {
    //   console.log("弹出微信扫码登录页");
    // },
    // 格式化文档密码
    getFilePassword() {
      if (this.userData.notepassword === null) {
        return "未设置";
      } else {
        return "已设置";
      }
    },
    // 修改文档密码
    changeFilePassword() {
      this.isChangeFilePassword = true;
      setTimeout(() => {
        // console.log(this.$refs.nickInput);
        this.$refs.filePasswordInput.style.border = "#0182c7 solid 1px";
        this.$refs.filePasswordInput.focus();
      }, 100);
    },
    // 确认修改文档密码
    submitFilePassword() {
      if (this.nowFilePassword != this.userData.notepassword) {
        console.log("将修改后的文档密码提交到服务器修改");
        // 告诉user组件重新获取userData数据
        this.$bus.$emit("reGetUserData", "1");
      }
      this.isChangeFilePassword = false;
    },
    // 将该账号的所有信息删除
    deleteUser() {
      console.log("将该账号的所有信息删除");
    },
    // 关闭组件
    closeSetting() {
      this.$store.commit("setShowSetting", false);
    },
  },
};
</script>

<style lang="less" scoped>
#setting {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 380px;
  height: 450px;
  background-color: white;
  z-index: 1002;
  border-radius: 5px;
  .settingHeader {
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: flex-end;
    i {
      font-size: 14px;
      width: 14px;
      height: 14px;
      cursor: pointer;
      &:hover {
        color: #0182c7;
      }
    }
  }
  .settingMain {
    overflow: auto;
    width: 100%;
    height: 396px;
    // background-color: antiquewhite;
    padding: 0 20px 20px;
    &::-webkit-scrollbar {
      display: none;
    }
    .portrait {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        cursor: pointer;
      }
      span {
        font-size: 14px;
        color: #0182c7;
        cursor: pointer;
      }
    }
    .item {
      font-size: 14px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .itemName {
        width: 80%;
        // display: flex;
        // justify-content: center;
        span {
          color: #3c3c3c;
        }
      }
      .itemMain {
        margin-top: 10px;
        width: 80%;
        padding: 8px 10px;
        background-color: #e3f4fd;
        border-radius: 5px;
        display: flex;
        justify-content: space-between;
        .itemText {
          color: #000;
        }
        .itemInput {
          background-color: transparent;
          width: 70%;
          outline: none;
          border: transparent solid 1px;
          border-radius: 3px;
          padding: 0 10px;
          //   &:hover {
          //     border: #0182c7 solid 1px;
          //   }
        }
        form {
          display: flex;
          align-items: center;
          .radio {
            width: 13px;
            height: 13px;
            border: #0182c7 solid 1px;
            border-radius: 50%;
            margin-left: 10px;
          }
          span {
            margin-left: 3px;
            font-size: 14px;
            color: #3c3c3c;
          }
        }
      }
      .itemBtn {
        color: #0182c7;
        cursor: pointer;
      }
    }
  }
}
</style>